<template>
    <div>
        <el-card class="mb">
            <el-button type="warning" @click="add()" plain>新增</el-button>
        </el-card>
        <el-card>
            <div class="table">
                <el-table :data="tableData" strip>
                    <el-table-column type="selection" width="55" align="center"
                        v-if="user.role === 'ADMIN'"></el-table-column>
                    <el-table-column prop="id" label="序号" width="70" align="center" sortable></el-table-column>
                    <el-table-column prop="order_no" label="订单编号"></el-table-column>

                    <el-table-column prop="status" label="订单状态">
                        <template v-slot="scope">
                            <el-tag type="danger" v-if="scope.row.status === '已取消'">已取消</el-tag>
                            <el-tag type="warning" v-if="scope.row.status === '待支付'">待支付</el-tag>
                            <el-tag type="primary" v-if="scope.row.status === '待发货'">待发货</el-tag>
                            <el-tag type="primary" v-if="scope.row.status === '待收货'">待收货</el-tag>
                            <el-tag type="info" v-if="scope.row.status === '待评价'">待评价</el-tag>
                            <el-tag type="success" v-if="scope.row.status === '已完成'">已完成</el-tag>
                            <el-tag type="red" v-if="scope.row.status === '已退款'">已退款</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="businessName" label="接单商家"></el-table-column>
                    <el-table-column prop="address" label="送货地址"></el-table-column>
                    <el-table-column prop="phone" label="下单人电话"></el-table-column>
                    <el-table-column prop="username" label="下单人"></el-table-column>
                    <el-table-column prop="amount" label="订单总价"></el-table-column>
                    <el-table-column prop="discount" label="优惠金额"></el-table-column>
                    <el-table-column prop="actual" label="实付款"></el-table-column>
                    <el-table-column prop="comment" label="备注"></el-table-column>
                    <el-table-column prop="time" label="下单时间"></el-table-column>
                    <el-table-column prop="payTime" label="支付时间"></el-table-column>
                    <el-table-column prop="payType" label="支付类型"></el-table-column>
                    <el-table-column label="详情" align="center" width="90" fixed="right">
                        <template v-slot="scope">
                            <el-button size="mini" type="primary" plain
                                @click="loadDetail(scope.row.id)">查看详情</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="240" fixed="right">
                        <template v-slot="scope">
                            <el-button size="mini" type="info" @click="sendGoods(scope.row, '待收货')"
                                v-if="scope.row.status === '待发货'">发货</el-button>

                            <el-button size="mini" type="danger" plain @click="del(scope.row.id)"
                                v-if="user.role === 'ADMIN'">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pagination">
                    <el-pagination background @current-change="handleCurrentChange" :current-page="queryform.pageNum"
                        :page-sizes="[5, 10, 20]" :page-size="queryform.pageSize" layout="total, prev, pager, next"
                        :total="total">
                    </el-pagination>
                </div>
            </div>

        </el-card>
        <el-dialog title="详情" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
            <el-table :data="ordersItemList" strip>
                <el-table-column prop="orderId" label="订单ID" align="center"></el-table-column>
                <el-table-column prop="goodsName" label="商品名称"></el-table-column>
                <el-table-column prop="goodsImg" label="商品图片">
                    <template v-slot="scope">
                        <div style="display: flex; align-items: center">
                            <el-image style="width: 40px; height: 40px;" v-if="scope.row.goodsImg"
                                :src="scope.row.goodsImg" :preview-src-list="[scope.row.goodsImg]"></el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="商品价格" align="center"></el-table-column>
                <el-table-column prop="num" label="购买数量" align="center"></el-table-column>
            </el-table>


        </el-dialog>
    </div>
</template>
<script>
import service from '@/request';

export default {
    data() {
        return {
            ordersItemList: [],
            fileList: [],
            tableData: [],  // 所有的数据
            pageNum: 1,   // 当前的页码
            pageSize: 10,  // 每页显示的个数
            total: 0,
            username: null,
            token: "",
            name: null,
            fromVisible: false,
            avatar: "",
            queryform: {
                keyword: "",
                pageNum: 1,
                pageSize: 10
            },
            license: "",
            form: {
                avatar: "",
                license: ""
            },
            user: {},
            rules: {

                cname: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],

                // business_id: [
                //     { required: true, message: '请选择商家类型', trigger: 'blur' },
                // ]
            },
            ids: [],
            sjlist: [],
        }
    },
    mounted() {
        this.token = window.localStorage.getItem("token")
        this.user = JSON.parse(window.localStorage.getItem("userinfo"))
        console.log(this.user)
        this.getall()
        this.getlist()
    },
    methods: {
        async loadDetail(id) {
            this.fromVisible = true
            const res = await service.post("/order/detail?id=" + id);
            console.log(res)
            this.ordersItemList=res.data.list

        },
        async sendGoods(row, b) {
            const res = await service.post("/order/update", {
                id: row.id,
                status: b
            });
            console.log(res)
            this.getlist()
        },

        handleFileSuccess(e) {
            console.log(e)
            this.form.img = e.data

        },
        async getall() {
            const res = await service.get("/Business/all");
            console.log(res)
            this.sjlist = res.data.list
        },

        del(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await service.post("/order/delete?id=" + id)
                console.log(res)
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getlist()
                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        force(e) {
            this.form.timeRange = e;
            this.$forceUpdate();
        },
        handleEdit(row) {
            this.form = row;
            this.fileList = []
            this.fileList.push({
                name: "图片",
                url: row.img
            })
            this.fromVisible = true
        },
        search() {
            this.queryform.pageNum = 1;
            this.queryform.pageSize = 10;
            this.getlist()
        },
        research() {
            this.queryform.keyword = ""
            this.queryform.pageNum = 1;
            this.queryform.pageSize = 10;
            this.getlist()

        },
        async getlist() {
            if (this.user.role == 'BUSINESS') {
                this.queryform.businessId = this.user.id
            }
            const res = await service.post("/order/list", this.queryform);
            console.log(res);
            if (res.code == 200) {
                this.tableData = res.data.rows;
                this.total = res.data.total;
            }


        },
        add() {
            this.avatar = ""
            this.license = "";
            this.form = {}
            this.fromVisible = true

        },
        handleLicenseSuccess(e) {

        },
        async save() {
            let busid = ""
            if (this.user.role == 'BUSINESS') {
                busid = this.user.id
            } else {
                busid = this.form.business_id
            }
            if (!this.form.id) {
                const res = await service.post("/Banner/add", {
                    img: this.form.img,
                    businessId: busid
                });
                if (res.code == 200) {
                    this.fromVisible = false
                    this.$message.success("操作成功")
                    this.getlist()
                }
            } else {
                const res = await service.post("/Banner/update", {
                    id: this.form.id,
                    img: this.form.img,
                    businessId: busid
                });
                if (res.code == 200) {
                    this.fromVisible = false
                    this.$message.success("操作成功")
                    this.getlist()
                }
            }




        },
        handleCurrentChange(e) {

        },
        handleAvatarSuccess(e) {
            console.log(e)
            this.avatar = e.data;
            console.log(this.form.avatar)
        },
        handleAvatarSuccess1(e) {

            this.license = e.data;
        }
    }
}
</script>
<style scoped>
.mb {
    margin-bottom: 10px;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px !important;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>